<template>
  <div>
          <n-space :vertical="false" >
            <n-input v-model="content" type="input" placeholder="请输入内容" @keydown.enter="search(content)"/>
            <n-button v-bind="content" @click="search(content)">搜索</n-button>
          </n-space>
          <n-divider/>
          <!--展示地址修改对话框-->
          <n-dialog
            title="修改订单地址"
            type="info"
            v-show="addressDialogVisible"
            @close="changeShowAddresDialog"
          >
            <n-form
              :model="addressForm"
              :rules="addressFormRules"
              ref="addressFormRef"
              label-width="100px"
            >   
              <n-form-item label="省市区/县">
                <n-cascader
                  v-model="addressForm.address1"
                  :options="cityData"
                ></n-cascader>
              </n-form-item>
              <n-form-item label="详细地址">
                <n-input type="input" placeholder="输入" v-model="addressForm.address2"></n-input>
              </n-form-item>
            </n-form>
            <n-button @click="changeShowAddresDialog">取 消</n-button>
            <n-button  @click="cantChange">确 定</n-button>
          </n-dialog>
    <!-- 展示物流进度对话框 -->
    <n-dialog title="查看物流进度" v-show="progressDialogVisible" width="50%" @close="changeShowProgressDialog">
    <!-- 时间线 -->
      <n-timeline>
        <n-timeline-item
          type="info"
          title="已签收,感谢使用顺丰,期待再次为您服务"
          time="2018-05-10 09:39:00"
        ></n-timeline-item>
        <n-timeline-item
          type="default"
          title="[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件"
          time="2018-05-10 08:23:00"
        ></n-timeline-item>
        <n-timeline-item
          type="default"
          title="快件到达 [北京海淀育新小区营业点]"
          time="2018-05-10 07:32:00"
        ></n-timeline-item>
        <n-timeline-item
          type="default"
          title="快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]"
          time="2018-05-10 02:03:00"
        ></n-timeline-item>
        <n-timeline-item
          type="default"
          title="快件到达 [北京顺义集散中心]"
          time="2018-05-09 23:05:00"
        ></n-timeline-item>
        <n-timeline-item
          type="default"
          title="快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]"
          time="2018-05-09 21:21:00"
        ></n-timeline-item>
        <n-timeline-item
          type="default"
          title="顺丰速运 已收取快件"
          time="2018-05-09 21:21:00"
        ></n-timeline-item>
        <n-timeline-item
          type="default"
          title="卖家发货"
          time="2018-05-09 12:25:03"
        ></n-timeline-item>
        <n-timeline-item
          type="default"
          title="商品已经下单"
          time="2018-05-08 21:36:04"
        ></n-timeline-item>
      </n-timeline>
    </n-dialog>
          <div>
              <n-data-table ref="table" :columns="columns" :data="dataSource" :pagination="pagination"/>
          </div>
  </div>
</template>

<script lang="ts">
import { h, reactive,ref } from '@vue/runtime-core';
import { onBeforeMount } from 'vue';
import cityData from './data/citydata.js';
import { 
      NPageHeader,
      NBreadcrumb,
      NBreadcrumbItem,
      NCard,
      NDescriptions,
      NDescriptionsItem,
      NDivider,
      NDataTable,
      NInput,
      NSpace,
      NTag,
      NButton,
      NDialog,
      NForm,
      NFormItem,
      NCascader,
      NTimeline,
      NTimelineItem,
      useMessage,
      NIcon,
  } from 'naive-ui';

  const dataSource =[{
      index: '1',
      order_number: '矿泉水 550ml',
      order_price: '2',
      is_payment: ['未付款'],
      is_send: '是',
      create_time: 1463785476,
  },{
    index: '2',
      order_number: '矿泉水 550ml',
      order_price: '2',
      is_payment: ['未付款'],
      is_send: '是',
      create_time: 1463785476,
    },{
    index: '3',
      order_number: '矿泉水 550ml',
      order_price: '2',
      is_payment: ['未付款'],
      is_send: '是',
      create_time: 1463785476,
    },{
    index: '4',
      order_number: '矿泉水 550ml',
      order_price: '2',
      is_payment: ['已付款'],
      is_send: '是',
      create_time: 1463785476,
    },{
    index: '5',
      order_number: '矿泉水 550ml',
      order_price: '2',
      is_payment: ['未付款'],
      is_send: '是',
      create_time: 1463785476,
    },{
    index: '6',
      order_number: '矿泉水 550ml',
      order_price: '2',
      is_payment: ['未付款'],
      is_send: '是',
      create_time: 1463785476,
    },{
    index: '7',
      order_number: '矿泉水 550ml',
      order_price: '2',
      is_payment: ['未付款'],
      is_send: '是',
      create_time: 1463785476,
    },{
    index: '8',
      order_number: '矿泉水 550ml',
      order_price: '2',
      is_payment: ['未付款'],
      is_send: '是',
      create_time: 1463785476,
  }]

  export default {
      components:{
          NPageHeader,
          NBreadcrumb,
          NBreadcrumbItem,
          NCard,
          NDescriptions,
          NDescriptionsItem,
          NDivider,
          NDataTable,
          NInput,
          NSpace,
          NTag,
          NButton,
          NDialog,
          NForm,
          NFormItem,
          NCascader,
          NTimeline,
          NTimelineItem,
          useMessage,
          NIcon,

      },
      setup(){
        window.localStorage
        const message = useMessage()
        const content = ref<string>("");
        const columns =reactive<any[]>([{
          title:'#',
          key:'index'
      },{
          title:'订单编号',
          key:'order_number',
      },{
          title:'订单价格',
          key:'order_price',
          // render(row:any){
          //   let price=(row.order_price.toFixed(2));
          //   return price;
          //       }

      },{
          title:'是否付款',
          key:'is_payment',
          render (row:any) {
            const tags = row.is_payment.map((tagKey:any) => {
              return h(
                NTag,
                {
                  style: {
                    marginRight: '6px'
                  },
                  type: 'info'
                },
                {
                  default: () => tagKey
                }
              )
            })
            return tags
          }
      },{
          title:'是否发货',
          key:'is_send',
      },{
          title:'下单时间',
          key:'create_time',
      },{
          title:'操作',
          key:'change',
          render(){
            return[
              h(
                NButton,
                {
                  size: 'small',
                  bordered:true,
                  onclick:()=>{
                    changeShowAddresDialog()
                  },  

                },
                {
                  default: () => '查看地址'
                }
              ),
              h(
                NButton,
                {
                  size: 'small',
                  bordered:true,
                  onclick:()=>{
                    changeShowProgressDialog()
                    // showProgressDialog()
                    // 对接接口后使用show。
                  },  

                },
                {
                  default: () => '查看物流'
                }
              )
            ]
          }

      }])

        const total = ref(0)
        const orderList:any = reactive<[]>([])
        const progressInfo = reactive<[]>([])
        let addressDialogVisible = ref<boolean>(false)
        let progressDialogVisible = ref<boolean>(false)
        const addressForm = {
          address1: [],
          address2: ''
        }
        const addressFormRules = {
          address1: [
            { required: true}
          ],
          address2: [
            { required: true}
          ]
        }
        const pagination=reactive<{}>({
        page:1,
        pageSize:8,
        showSizePicker:true,
        pageSizes:[2,4,8],
        onChange:(page:number)=>{OnChange(page);},
        onPageSizeChange:(pageSize:any)=>{OnPageSizeChange(pageSize);}
      })
        /**
         * 改变页时的函数
         * params p 分页后的页值
         */
        const OnChange=(p:number)=>{
          pagination.page=p;
        }
        /**
         * 改变一页最大数量的函数
         * params ps 一页最大数量
         */
        const OnPageSizeChange=(ps:number)=>{
          pagination.pageSize=ps;
          pagination.page=1;
        }

        // onBeforeMount(() => {
        //   this.getorderList()
        // })
        async function getOrderList () {
          // const { data: res } = await this.$http.get('/orders')
          // if (res.meta.status !== 200) {
          //   return this.$message.error('获取订单列表失败！')
          // }
          this.total = localStorage.getItem("sum_order")
          for (let i=1;i<localStorage.length + 1;i++){
            var patt = /^order/
            var j = localStorage.key(i)
            if(j!=null){
              if(patt.test(j)){
                orderList.push(localStorage.getItem(j))
              }
            }
          }
        }
        async function showProgressDialog () {
          const { data: res } = await this.$http.get('/?/?/1234567')
          if (res.meta.status !== 200) {
            return this.$message.error('获取物流进度失败!')
          }
          this.progressInfo = res.data
          this.progressDialogVisible = true
        }
        async function changeAddres(addressForm:any) {
          // const { data: res } = await this.$http.post('/?/?', {
          //   id: 'id',
          //   newAddres: 'newAddres'
          // })
          // .then(function (response:any) {
          //   console.log(response);
          // })
          // .catch(function (error:any) {
          //   console.log(error);
          // });
          var addres:string = addressForm.address1.toString().concat(addressForm.address2)
          localStorage.setItem("adres",addres)
        }
        function search(value:string){
          // 搜索功能
          message.info("什么都没发生")
          content.value = ""
        }
        function cantChange(){
          message.info('未做修改，只做演示')
        }
        function changeShowAddresDialog(){
          addressDialogVisible.value = !addressDialogVisible.value
          console.log(addressDialogVisible)
        }
        function changeShowProgressDialog(){
          progressDialogVisible.value = !progressDialogVisible.value
        }
        return{
          total,
              orderList,
              progressInfo,
              content,
              columns,
              dataSource,
              cityData,
              search,
              addressForm,
              addressDialogVisible,
              progressDialogVisible,
              addressFormRules,
              pagination,
              changeShowAddresDialog,
              changeShowProgressDialog,
              cantChange,
              changeAddres,
              showProgressDialog,
        }
      }

  }
</script>

<style>
.detail__header{
  padding: 12px 24px 16px;
  background: #fff;
}

</style>
